<template>
  <div class="add-friend">
    <!-- 设置参数 -->
    <!-- status-icon -->
    <el-form
      size="mini"
      label-width="100px"
      ref="addFriendFormRef"
      :rules="rules"
      :model="addFriendForm"
      class="add-form demo-ruleForm"
    >
      <el-form-item class="add-item" label="输入号码：" prop="number">
        <el-input v-model="addFriendForm.number" maxlength="20" clearable placeholder="微信号/QQ号/手机号"></el-input>
      </el-form-item>
      <el-form-item class="add-item" label="验证消息：">
        <el-input v-model="addFriendForm.message" maxlength="50" clearable placeholder="选填"></el-input>
      </el-form-item>
      <el-form-item class="add-item" label="设置备注：">
        <el-input v-model="addFriendForm.memo" maxlength="50" clearable placeholder="选填"></el-input>
      </el-form-item>

      <el-form-item size="medium" class="add-btn">
        <el-button type="primary" @click="onSubmit">立即添加</el-button>
        <!-- <el-button @click="resetForm('addFriendFormRef')">重置</el-button> -->
      </el-form-item>
    </el-form>

    <!-- 历史任务 -->
    <el-table :data="tableData" stripe border height="60" class="table-data" style="width: 100%">
      <el-table-column label="输入号码" prop="Phones"></el-table-column>
      <el-table-column label="验证消息" prop="message"></el-table-column>
      <el-table-column label="备注名" prop="Remark"></el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">
          <span v-text="$options.filters.timeFilter(scope.row.TaskId)"></span>
        </template>
      </el-table-column>
      <el-table-column label="结果" prop="result"></el-table-column>
      <!-- 自定义结果 -->
      <!-- <el-table-column label="结果" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.result === '指令已经发出'" type="text" loading size="mini">指令已经发出</el-button>
          <el-button v-else-if="scope.row.result === '已申请'" type="text" size="mini">已申请</el-button>
          <el-button v-else-if="scope.row.result === 'already friend'" type="success " size="mini">已经是好友</el-button>
          <el-button v-else-if="scope.row.result === 'not found'" type="warning " size="mini">该用户不存在</el-button>
        </template>
      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ToolsAddFriend',
  data() {
    return {
      // 要提交的表单
      addFriendForm: {
        number: '',
        message: '',
        memo: '',
      },
      // 表单验证
      rules: {
        number: [
          { required: true, message: '请输入微信号/QQ号/手机号', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
      // 添加的历史
      taskHistory: this.$store.getters['nedb/addFriends']
    }
  },
  computed: {
    tableData() {
      return this.$store.getters['nedb/addFriends']
    }
  },
  filters: {
    timeFilter(time) {
      time = parseInt(time / 10000)
      return new Date(time).toLocaleString()
    }
  },
  methods: {
    // 提交表单
    onSubmit() {
      let currentNavs = this.$store.getters['currentNavs']
      let currentWechats = this.$store.getters['currentWechats']
      let wechatId = currentWechats[currentNavs[this.$route.name]]
      //   如果没有选择微信 给出提示
      if (wechatId) {
        let phones = [] // 注意必须是数组
        // 如果通过验证 提交表单
        this.$refs['addFriendFormRef'].validate((valid) => {
          if (valid) {
            phones.push(this.addFriendForm.number)
            this.addFriendForm.taskId = new Date().getTime() * 10000 + parseInt(Math.random() * 10000)
            this.addFriendForm.wechatId = wechatId
            this.addFriendForm.phones = phones
            // 通过websocket 提交命令
            this.$store.dispatch('websocket/AddFriendsTask', this.addFriendForm)
            // 重置表单
            // this.$refs['addFriendFormRef'].resetFields();
            this.resetForm()
          } else {
            this.$message({
              message: '请检查输入号码！',
              type: 'error'
            })
            return false;
          }
        });
      } else {
        this.$message({
          message: '请先选择微信！',
          type: 'warning'
        })
      }
    },
    // 重置表单
    resetForm(formName = 'addFriendFormRef') {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style lang="scss" scoped>
.add-friend {
  height: 100%;
  display: flex;
  flex-direction: column;

  .add-form {
    position: relative;
    border-bottom: solid black 5px;

    .add-item {
      width: 80%;
      margin-bottom: 0;
      margin: 20px 0;
    }

    .add-btn {
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translate(-5%, -50%);
    }
  }

  .table-data {
    flex: 1 1 auto;
  }
}
</style>
